<template>
	<view class="app" style="padding-bottom: 60px; max-width: 640px;">
		<view class="panel">
			<view class="query">	
				<view class="date" @click="showSelectCity">选择城市</view>
				<view class="btn" @click.stop="loadlist">查看</view>
			</view>
		</view>
		<niceui-popup-select ref="showCity" :columns="cityList" :selectValue="cityId" :is-search="false" :option="{label:'desc', value:'site_id'}" @confirm="confirmCity"></niceui-popup-select>
		
		<view class="panel" v-for="(item,index) in list.data">
			<view class="flex justify-between items-center">
				<view class="flex justify-start items-center">
					<image class="avatar" mode="aspectFit" :src="item.avatar" @click="showpic([item.avatar],0)"></image>
					<text @click="toCopy(item.realname)">{{item.realname}}</text>
				</view>
				<view>
					{{item.shopname}}
				</view>
			</view>
			<view class="flex justify-start">
				<image class="photo" mode="heightFix" :src="pic" v-for="(pic,index2) in item.album" @click="showpic(item.album,index2)"></image>
			</view>
<!-- 			<view class="flex justify-between items-center">
				<view class="address">{{item.create_time*1000|formatDate}}</view>
			</view> -->
		</view>
		<view class="page playctr">
			<view class="page-item" style="max-width: 640px; margin: 0 auto;">
				<wyb-pagination :total-items="list.total" :page-items="list.per_page" :current="list.current_page" :show-total-item="true" :show-icon="true" @change="loadlist"/>
			</view>
		</view>
	</view>
</template>

<script>
	var that,App=getApp(),Comm=getApp().comm;
	export default {
		data() {
			return {
				cityList:[],
				cityId:[],
				list:{}
			}
		},
		onLoad() {
			that=this;
		
			let city=[];
			Comm.http('/api/technician/loadcity').then(res=>{
				for (let item of res.data) {
					city.push({
						site_id:String(item.site_id),
						desc:item.desc
					});
					that.cityId.push(String(item.site_id));
				}
				that.cityList=city;
				this.loadlist();
				
			});

		},
		methods: {
			showSelectCity(){
				this.$refs.showCity.showPopup()
			},
			toCopy(e){
				Comm.copy(e);
			},
			confirmCity(value,data) {
				that.cityId=value;
				this.$refs.showCity.closePopup()
			},
			loadlist(page={current:1}){
				let _page=page.current;
				let citylist=[];
				for (let item of this.cityId) {
					citylist.push(item);
				}
				Comm.http('/api/technician/editor_techpic',{page:_page,city:citylist},'POST').then(res=>{
					if(res.code==1)
						that.list=res.data;
					else
						uni.showToast({
							icon:'none',
							title:res.msg
						});
				});
			},
			showpic(url,i){
				uni.previewImage({
					urls:url,
					current:i
				})
			}
		}
	}
</script>

<style>
	.query{
		display: flex;  justify-content: center;
		.date{padding:4px 0; border-bottom: 1px solid #999999; margin-right: 16px;}
		.btn{
			padding: 4px 3vw; text-align: center; border: 1px solid #666; border-radius: 5px;
		}
	}
	.head{
		padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid #f0f0f0;
	}
	.avatar{
		width: 32px; height: 32px; margin-right: 5px;
	}
	.photo{
		height: 80px; margin-top: 8px; margin-right: 8px;
	}
	.address{
		padding-top: 8px; font-size: 12px;
	}
	.playctr{
		position: fixed; left: 0; bottom: 0; width: 100vw; border-top:#e6e6e6 1px solid; background-color: #fff;  padding: 8px 0;
	}
	.playctr-item{
		margin: 8px 8px;
	}
</style>
